Petrie's Webpage Tutorials-- Fonts

Fonts

Fonts

Fonts are a great way to add spice to a webpage. The trick is, though, to choose a font that your viewer will already have installed on their computer (Windows 95 has certain fonts already installed). Otherwise, all the person will see is their default font (BORING). So...how do you check to see what fonts are available to the regular surfer? Easy:

If you're a Windows 95 user, click on the START bar. Then click on SETTINGS, then CONTROL PANEL. Double click on the FONTS icon. There, you will see many options and be able to preview them to see what they look like. What does this mean? Well, it means that any user with Windows 95 can view that font on any page that they're at. So, choose some of your favorite fonts and get to work! After time, you will develop biases towards certain fonts (the one I'm using now, Comic Sans MS, is one of my favorites.)

NOW THAT YOU HAVE A FONT PICKED OUT...

I'll show you how to use it! For this demonstration, I'll use the font Copperplate Gothic BT

The code...

<FONT FACE="Copperplate Gothic BT"> No...that is not correct</FONT>

And that gives us...No..that is not correct

Let's go through this one step at a time:

<FONT --the beginning of the command
FACE --the type of font you will be using (don't forget the = and " signs...it will not work without them!)
Copperplate Gothic BT -- the font you wish to use. Make sure it is spelled correctly and that you have the closing ". If not, it won't work!
> --end tag
No, that is not correct --the type that you want in that font
</FONT> --ends the font!

The <FONT> tag has some attributes, also. If you're not sure of how they work, please go read the Horizontal Lines section in Basic HTML (I use an example).

Here are the attributes:

size --1 to 7, 1 smallest, 7 biggest
color --use the color chart

Other font-related tags:

<b> -- makes text bold. To end bold text, </B>
<i> -- makes text italisized. To end, </i>.
<u> -- makes text underlined. To end, </u>

Headers:

No need to explain, I hope. The tag is <H1>, <h2>, etc. The numbers range from 1 to 6, 1 being biggest, 6 being smallest. To use this tag, you do this:

<h3> Your text here</h3>

That would produce this:

Your text here

That's about it for fonts!!(whew.. a lot to learn, eh?!)